<!-- 基站管理 -->
<template>
    <div class="radius">
        <!-- 地图 -->
        <v-map
            ref="map"
            :positionList="positionList"
            :addStation="addStation"
            :whetherAdd="showPop"
            searchSiteInputId="searchSite"
        >
            <div class="searchSite">
                请输入关键字：<input placeholder="请输入地址" id="searchSite" />
            </div>
        </v-map>
        <div class="table-section">
            <el-form
                :model="queryParams"
                ref="queryForm"
                label-width="100px"
                class="area-ruleForm"
            >
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="基站编号">
                            <el-input
                                v-model="queryParams.siteNo"
                                placeholder="请输入基站编号"
                                clearable
                                size="small"
                                @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="基站名称">
                            <el-input
                                v-model="queryParams.siteName"
                                placeholder="请选择"
                                clearable
                                size="small"
                                @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所在区域">
                            <el-select
                                v-model="queryParams.siteType"
                                clearable
                                size="small"
                            >
                                <el-option
                                    v-for="dict in areaArr"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="管理单位">
                            <treeselect
                                v-model="queryParams.companyId"
                                :options="deptOptions"
                                :disable-branch-nodes="false"
                                :show-count="true"
                                placeholder="请选择归属部门"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button
                                type="primary"
                                icon="el-icon-search"
                                size="mini"
                                @click="handleQuery"
                                >搜索</el-button
                            >
                            <el-button
                                icon="el-icon-refresh"
                                size="mini"
                                @click="resetQuery"
                                >重置</el-button
                            >
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button
                        type="primary"
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAdd"
                        >新增</el-button
                    >
                </el-col>
                <el-col :span="1.5">
                    <el-button
                        type="warning"
                        icon="el-icon-download"
                        size="mini"
                        @click="exportStation"
                        >导出</el-button
                    >
                </el-col>
            </el-row>
            <el-table v-loading="loading" :data="stationList">
                <el-table-column
                    label="基站编号"
                    align="center"
                    prop="siteNo"
                />
                <el-table-column
                    label="基站名称"
                    align="center"
                    prop="siteName"
                />
                <el-table-column
                    label="所在区域"
                    align="center"
                    prop="region"
                />
                <el-table-column
                    label="基站类型"
                    align="center"
                    prop="siteType"
                />
                <el-table-column
                    label="管理单位"
                    align="center"
                    prop="companyName"
                />
                <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                            >修改</el-button
                        >
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="deleteStation(scope.row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getStationList"
            />
            <div class="pop" v-show="showPop"></div>
        </div>

        <!-- 新增基站管理 -->
        <el-dialog
            :before-close="closeDialog"
            :title="title"
            :visible.sync="open"
            width="500px"
            append-to-body
        >
            <el-form
                ref="form"
                label-width="80px"
                :model="addParams"
                :rules="rules"
            >
                <el-form-item label="基站编号" prop="siteNo">
                    <el-input
                        placeholder="请输基站编号"
                        v-model="addParams.siteNo"
                    />
                </el-form-item>
                <el-form-item label="基站名称" prop="siteName">
                    <el-input
                        placeholder="请输入基站名称"
                        v-model="addParams.siteName"
                    />
                </el-form-item>
                <el-form-item label="所在区域" prop="region">
                    <el-select
                        v-model="addParams.region"
                        clearable
                        style="width:100%;"
                    >
                        <el-option
                            v-for="dict in areaArr.slice(1)"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="基站类型" prop="siteType">
                    <el-select
                        v-model="addParams.siteType"
                        clearable
                        style="width:100%;"
                    >
                        <el-option
                            v-for="dict in stationTypeArr"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="管理单位" prop="companyId">
                    <treeselect
                        v-model="addParams.companyId"
                        :options="deptOptions"
                        :disable-branch-nodes="false"
                        :show-count="true"
                        placeholder="请选择归属部门"
                    />
                </el-form-item>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="照片">
                            <el-upload
                                ref="upload"
                                :action="uploadUrl"
                                :headers="headers"
                                :on-success="uplPhotoSuccess"
                                :file-list="fileList"
                                :limit="1"
                                list-type="picture-card"
                                :on-remove="removeFile"
                            >
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import { mapState } from "vuex";
import VMap from "./v-map.vue";
import { getToken } from "@/utils/auth";
import { getStationList, getStationInfo, getPositionList, deleteStation, addStation, modifiStation, exportStation } from '@/api/station'
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    data () {
        return {
            // 遮罩层
            loading: false,
            // 查询参数
            queryParams: {
                pageSize: 10,
                pageNum: 1,
                siteNo: '',
                siteName: '',
                region: '',
                siteType: '',
                companyId: undefined,
            },
            addParams: {
                companyId: "",
                id: "",
                lat: 0,
                lng: 0,
                locationImg: "",
                region: "",
                siteName: "",
                siteNo: "",
                siteType: ""
            },
            rules: {
                siteNo: [
                    { required: true, message: '请输入基站编号', trigger: ['blur', 'change'] }
                ],
                siteName: [
                    { required: true, message: '请输入基站名称', trigger: ['blur', 'change'] }
                ],
                region: [
                    { required: true, message: '请选择区域', trigger: ['blur', 'change'] }
                ],
                siteType: [
                    { required: true, message: '请选择基站类型', trigger: ['blur', 'change'] }
                ],
                companyId: [
                    { required: true, message: '请选择管理单位', trigger: ['blur', 'change'] }
                ]
            },
            deptOptions: [],
            // 基站类型
            stationTypeArr: [],
            // 所在区域
            areaArr: [],
            //新增基站弹框
            open: false,
            // 用户导入参数
            headers: { Authorization: "Bearer " + getToken() },
            uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
            stationList: [],
            total: 0,
            title: "",
            positionList: [],
            showPop: false,
            submitType: 'add', // 是新增还是修改
            fileList: []
        };
    },
    components: { VMap, Treeselect },
    created () {
        this.getTreeselect()
        this.getDicts("station_type").then(response => {
            this.stationTypeArr = response.data;
        });
        this.getDicts("area_site").then(response => {
            this.areaArr = response.data;
            this.areaArr.unshift({
                "dictLabel": '所有',
                "dictValue": ''
            })
        });
        this.getStationList()
        this.getPositionList()
    },
    methods: {
      removeFile (file, fileList) {
        this.addParams.locationImg="";
      },
        closeDialog (done) {
            this.$refs.upload.clearFiles()
            done()
        },
        siteTypeFormatter (row) {
            for (let i = 0; i < this.stationTypeArr.length; i++) {
                if (row.siteType == this.stationTypeArr[i].dictLabel) {
                    return this.stationTypeArr[i].dictValue
                }
            }
            return row.siteType
        },
        regionFormatter (row) {
            for (let i = 0; i < this.areaArr.length; i++) {
                if (row.region == this.areaArr[i].dictLabel) {
                    return this.areaArr[i].dictValue
                }
            }
        },
        /** 查询部门下拉树结构 */
        getTreeselect () {
            treeselect().then(response => {
                this.deptOptions = response.data;
            });
        },
        /** 搜索按钮操作 */
        handleQuery () {
            this.queryParams.pageNum = 1;
            this.getStationList();
        },
        /** 重置按钮操作 */
        resetQuery () {
            this.queryParams = {
                pageSize: 10,
                pageNum: 1,
                siteNo: '',
                siteName: '',
                region: '',
                siteType: '',
                companyId: undefined
            }
            this.getStationList();
        },
        /** 新增按钮操作 */
        handleAdd (row) {
            this.addParams = {
                companyId: undefined,
                id: "",
                lat: 0,
                lng: 0,
                locationImg: "",
                region: "",
                siteName: "",
                siteNo: "",
                siteType: ""
            }
            this.fileList = []
            this.submitType = 'add'
            this.open = true;
            this.title = "新增基站管理";
        },
        handleUpdate (row) {
            debugger
            this.submitType = 'modifi'
            this.open = true;
            this.title = "修改基站管理";
            this.addParams = Object.assign(this.addParams, row)
            if (row.photos.length>0) {
              this.fileList = row.photos.map(item => {
                return {
                  url: item.attaPath
                }
              })
            }
        },
        uplPhotoSuccess (res, file) {
            if (res.code == 200) {
                this.addParams.locationImg = res.url
            }
        },
        // 取消按钮
        cancel () {
            this.$refs.upload.clearFiles()
            this.open = false;
        },
        async getStationList () {
            let res = await getStationList(this.queryParams)
            if (res.code == 200) {
                this.stationList = res.data
                this.stationList.forEach(async (item) => {
                    let stationInfov = await getStationInfo(item.id)
                    console.log(stationInfov)
                })
                this.total = res.total
            }
        },
        async getPositionList () {
            let res = await getPositionList()
            if (res.code == 200) {
                this.positionList = res.data
            }
        },
        async deleteStation (row) {
            let res = await deleteStation(row.id)
            if (res.code == 200) {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                })
                this.getStationList()
                this.getPositionList()
            }
        },
        async submit () {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    if (this.submitType == 'add') {
                        this.$confirm('系统提示', '请在地图进行描点确认基站位置！', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'info'
                        }).then(() => {
                            this.showPop = true
                            this.open = false
                        }).catch(() => {
                            this.showPop = false
                            this.open = false
                        });
                    } else {
                        this.modifiStation()
                    }
                } else {
                    return false;
                }
            });
        },
        async addStation (lat, lng) {
            if (!this.showPop) return false
            this.addParams.lat = lat
            this.addParams.lng = lng
            let res = await addStation(this.addParams)
            if (res.code == 200) {
                this.$refs.upload.clearFiles()
                this.showPop = false
                this.getStationList()
                this.getPositionList()
            }
        },
        async modifiStation () {
            this.addParams.siteType = this.siteTypeFormatter(this.addParams)
            this.addParams.region = this.regionFormatter(this.addParams)
            let res = await modifiStation(this.addParams)
            if (res.code == 200) {
                this.$refs.upload.clearFiles()
                this.$message({
                    message: '修改成功',
                    type: 'success'
                })
                this.showPop = false
                this.open = false
                this.getStationList()
            }
        },
        async exportStation () {
            let res = await exportStation(this.queryParams)
            if (res.code == 200) {
                this.download(res.msg);
            }
        }
    }
};
</script>
<style lang='scss' scoped>
.radius{
    height: calc(100vh - 120px);
    min-height: 100%;
    overflow-y: auto;
    margin: 10px;
    margin-right: 0px;
}
.searchSite {
    position: absolute;
    right: 130px;
    top: 20px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    z-index: 2;
    padding: 10px;
    font-size: 14px;
    color: #666;
}
.searchSite input {
    border: none;
    outline: none;
    font-size: 14px;
    color: #666;
}
.area-ruleForm {
    padding-top: 20px;
}
.table-section {
    position: relative;
}
.table-section .pop {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.1);
}
</style>
